<template>
  <!-- 货物装载列表 -->
  <div>
    <div class="btn-box">
      <div class="btn_left">
        <el-button type="primary" @click="addNewData"> 导入集装箱 </el-button>
        <el-button @click="deleteData">删除</el-button>
      </div>
      <div class="statistical-information">
        <span class="statistical-title">总件数：</span>
        <span class="statistical-number">0</span>
        <span class="statistical-title">总毛重：</span>
        <span class="statistical-number">0</span>
        <span class="statistical-title">总体积：</span>
        <span class="statistical-number" style="margin-right: 0px">0</span>
      </div>
    </div>

    <el-form
      :model="data"
      label-width="0"
      label-suffix="："
      ref="tableFormRef"
      :show-message="false"
      :rules="docCargoColdListRuls"
    >
      <el-table
        :data="tableData"
        border
        max-height="400px"
        size="small"
        @cell-click="cellClick"
        @selection-change="handleSelectionChange"
        :row-style="selectRowClassName"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column align="center" label="箱型箱尺">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-select
                v-model="scope.row.containerCode"
                size="small"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in defaultBoxSizeOption"
                  :key="item.id"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <span v-else>
              {{ scope.row.containerCode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="箱号">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.ctnNo"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.ctnNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="封号">
          <template #default="scope">
            <div
              v-if="
                scope.$index === rowIndex && scope.column.no === columnIndex
              "
            >
              <el-input
                v-model="scope.row.ctnNo"
                size="small"
                placeholder="请输入"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.ctnNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="件数">
          <template #default="scope">
            <span>
              {{ scope.row.digit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="包装单位">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="重量(KGS)">
          <template #default="scope">
            <span>
              {{ scope.row.digit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="体积(CBM)">
          <template #default="scope">
            <span>
              {{ scope.row.volume }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="addNewData(scope.row)"
              >选择货物</el-button
            >
            <el-button
              type="text"
              style="margin-left: 0px"
              @click="openDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <!-- 选择货物 -->
    <el-dialog
      :title="dialogData.title"
      v-model="dialogData.show"
      width="1200px"
    >
      <div class="add-cargo-table">
        <div class="cargo-table" style="width: 30%">
          <el-table
            :data="tableData"
            border
            max-height="400px"
            size="small"
            @cell-click="cellClickLeft"
          >
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="箱号"
              width="75"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.ctnNo }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="封号"
              width="75"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.ctnNo }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="箱型"
              width="75"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.digit }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="件数"
              width="75"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="cargo-table" style="width: 70%; margin-left: 12px">
          <el-table
            :data="tableData"
            border
            max-height="400px"
            size="small"
            @cell-click="cellClickLeft"
          >
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="提单号"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.ctnNo }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="费用名称"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.ctnNo }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="费用币种"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.digit }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="费用汇率"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="费用金额"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="待销金额"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="结算单位"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="收付类别"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="业务人员"
            >
              <template #default="scope">
                <span>
                  {{ scope.row.containerTareWeight }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button type="primary" size="small" @click="addCargo">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      :title="dialogData.titleDetail"
      v-model="dialogData.showDetail"
      width="1200px"
    >
      <el-table
        :data="tableData"
        border
        height="540px"
        size="small"
        @cell-click="cellClickLeft"
      >
        <el-table-column align="center" show-overflow-tooltip label="箱型箱尺">
          <template #default="scope">
            <span>
              {{ scope.row.ctnNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="箱号"
          width="60"
        >
          <template #default="scope">
            <span>
              {{ scope.row.ctnNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="封号"
          width="60"
        >
          <template #default="scope">
            <span>
              {{ scope.row.digit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="提单号">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="英文品名"
          width="81"
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="件数"
          width="81"
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="包装单位">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="毛重(KGS)">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="体积(CBM)">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="唛头">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="UN Code(危)"
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="类别(危)">
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="联系电话(危)"
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="联系人(危)"
        >
          <template #default="scope">
            <span>
              {{ scope.row.containerTareWeight }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="dialogData.showDetail = false"
            type="default"
            size="small"
            >取消</el-button
          >
          <el-button type="primary" size="small" @click="addCargo">
            保存
          </el-button>
        </span>
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, toRaw } from 'vue'
import selectDown from './../components/selectDown.vue'
import { validateOnlyNumberTwo, validateNumber } from '@/utils/validate.js'
export default defineComponent({
  components: {
    selectDown
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {}
    },
    //初始化option
    initOption: {
      type: Object,
      default: () => {}
    },
    defaultBoxSizeOption: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:detailData'],
  computed: {
    // data: {
    //   get() {
    //     return this.detailData
    //   },
    //   set(value) {
    //     this.$emit('update:detailData', value)
    //   }
    // },
    data() {
      return this.docCargoColdList()
    }
  },
  inject: ['docCargoColdList'],
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      tableSelect: [],
      tableSelectAdd: [],
      tableData: [
        {
          ctnNo: '111'
        }
      ],
      //分票报关的父数据下标
      childFrIndex: -1,
      childDialogShow: false,
      initChildTable: false,
      // 用于autocompelte组件
      timeout: null,
      dialogData: {
        title: '添加明细',
        show: false,
        titleDetail: '货物详情',
        showDetail: false
      },
      // 是否已选择集装箱列表
      rowBoxs: '',
      docCargoColdListRuls: {
        ctnSeal: [
          {
            required: true,
            message: '请填写英文品名',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    validateNumber,

    // 载入货物
    addCargo() {
      for (const iterator of this.tableSelectAdd) {
        this.data.docCargoColdList.push(iterator)
      }
      this.dialogData.show = false
    },

    queryContainCode(val, cb) {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(async () => {
        let res = await this.$http.get('/api/base/port/query', {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: val
        })
        if (res) {
          let options = res.content.map((item) => {
            return {
              id: item.id,
              value: item.id,
              label: `${item.portName} | ${item.portEnName}`,
              selectLabel: `${item.portName} | ${item.portEnName}`
            }
          })
          cb(options)
        } else {
          console.error(error)
          cb([])
        }
      }, 200)
    },

    // hs-code选择
    cotainerCodeSelect(val) {
      console.log(val, 'val')
    },

    // 设置当前表所有操作验证必填项是否填写
    async validateBoxes() {
      let falg = true
      await this.$refs.tableFormRef.validate((res) => {
        falg = res
      })
      if (!falg) {
        this.$message.error('请填写英文品名')
      }
      return falg
    },

    // 设置集装箱列表是否已选择
    setBox(row) {
      this.rowBoxs = row
    },

    //单元格被点击时会触发该事件
    async cellClick(row, column, cell, event) {
      if (column.label != '操作' && column.no != 0) {
        let falg = await this.validateBoxes()
        if (falg) {
          //   this.rowIndex = this.data.docCargoColdList.findIndex((t) => t == row)
          this.rowIndex = this.tableData.findIndex((t) => t == row)
          this.columnIndex = column.no
        }
      }
    },
    // 高亮勾选行
    selectRowClassName({ row, rowIndex }) {
      if (this.tableSelect.includes(row)) {
        return {
          'background-color': '#5A9CF819'
        }
      }
      return ''
    },
    //输入框失去焦点事件
    inputBlur(scope) {
      this.rowIndex = -1
      this.columnIndex = -1
    },
    /**
     * 选择后的数据
     */
    handleSelectionChange(val) {
      let arr = []
      for (let item of val) {
        let ret = toRaw(item)
        if (ret !== undefined) {
          arr.push(ret)
        }
      }
      this.tableSelect = arr
    },
    /**
     * 载入货物选择
     */
    handleSelectionAdd(val) {
      let arr = []
      for (let item of val) {
        let ret = toRaw(item)
        if (ret !== undefined) {
          arr.push(ret)
        }
      }
      this.tableSelectAdd = arr
    },
    /**
     * 车队下拉选择
     */
    // getTruckCodeData(e, index) {
    //   console.log(e)
    //   this.data.docWorkCtnList[index].truckCode = e.leftName
    //   this.data.docWorkCtnList[index].truckName = e.rigthName
    //   this.data.docWorkCtnList[index].truckId = e.id
    // },

    // 新增限制没有选择
    hasSelectBox() {
      if (!this.rowBoxs) {
        return false
      }
      return true
    },

    async addNewData() {
      this.dialogData.show = true
    },

    async produceBlur(rowIndex, columnIndex) {
      await this.$refs.tableFormRef.validate()
    },

    editRowData(row) {
      this.dialogData.show = true
    },

    /**
     * 将option.label传值给PortDepartureName
     * @param {object} data - 装货港选择的option
     */
    getPortDepartureName(data) {
      this.data.portDepartureName = data.label
      this.initOption.zhgOption = [
        {
          id: data.id,
          value: data.value,
          label: data.selectLabel
        }
      ]
    },
    // 清空选中数据同时清空港口option内的数据
    portDepartChange(val) {
      if (!val) {
        this.initOption.zhgOption = []
      }
    },

    openDetail() {
      this.dialogData.showDetail = true
    },

    deleteData() {
      if (this.tableSelect.length > 0) {
        for (let i = this.tableSelect.length - 1; i >= 0; i--) {
          let deleteIndex = this.data.docCargoColdList.findIndex(
            (t) => t == this.tableSelect[i]
          )
          if (deleteIndex > -1) {
            this.data.docCargoColdList.splice(deleteIndex, 1)
          }
        }
      } else {
        this.$message.error('请先选择')
      }
    },
    // openChildData() {
    //   if (this.tableSelect.length == 1) {
    //     this.childFrIndex = this.data.docWorkCtnList.findIndex(
    //       (initem) => initem == this.tableSelect[0]
    //     )
    //     this.data.docWorkCtnList[this.childFrIndex].docWorkCtnDetailList =
    //       this.data.docWorkCtnList[this.childFrIndex].docWorkCtnDetailList || []
    //     this.initChildTable = true
    //     this.$nextTick(() => {
    //       this.childDialogShow = true
    //     })
    //   } else {
    //     this.$message.warning('请选择一条数据')
    //   }
    // },
    ToVGMWeight(row, index) {
      this.data.docWorkCtnList[index].vgmWeight =
        Math.round((row.containerTareWeight + row.grossWeight) * 100) / 100
    },
    selectGoods() {
      this.dialogData.title = '选择货物'
      this.dialogData.show = true
    },
    cancel() {
      this.dialogData.show = false
    }
  },
  watch: {}
})
</script>
<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.btn-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

:deep(.el-table) {
  .el-table__header th {
    background-color: #f7f8fa;
  }
  .cell {
    height: 32px;
    line-height: 32px;
  }
  .el-table_1_column_1 .cell {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .el-table__cell {
    padding: 0;
    height: 32px;
  }
  .el-input-number {
    width: 100%;
    .el-input__inner {
      text-align: left;
      padding: 0 8px;
    }
    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  .el-input__inner {
    padding: 0 8px;
  }
  .el-date-editor {
    .el-input__prefix {
      display: none;
    }
  }
}
:deep(.el-dialog) {
  padding: 0px;
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 16px;
  }

  .el-dialog__body {
    // padding: 8px 12px 8px 18px;
    padding: 12px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
    text-align: center;
  }

  .cargo-container {
    margin: 8px 12px 8px 18px;
    .statistical-information {
      padding: 4px 8px;
      background: #f3f3f3;
      width: 100%;
    }
    .el-table th .cell {
      background: #f8f8f8;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner {
      width: 16px;
      height: 16px;
    }
    .el-checkbox.el-checkbox--small .el-checkbox__inner::after {
      height: 8px;
    }
  }
  .el-form-item__label {
    padding: 0px;
    color: #000000d8;
    font-family: PingFang SC;
    font-weight: normal;
    letter-spacing: 0px;
  }

  .add-cargo-table {
    display: flex;
    .cargo-table {
      border-radius: 2px;
      background: #ffffff;
      border: 1px solid #e7e7e7;
      padding: 12px;
    }
  }
}
.statistical-title {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
}
.statistical-number {
  color: #5a9cf8;
  font-family: PingFang SC;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0px;
  margin-right: 12px;
}
:deep(.el-checkbox) {
  height: 100%;
}
</style>
